<template>
    <div class="main">
        <group label-width="4.5em" label-margin-right="2em" label-align="right" gutter="40%">
            <x-input title="用户名" placeholder="必填" v-model.trim="username"></x-input>
            <x-input title="密码" type="password" placeholder="必填" v-model.trim="password"></x-input>
        </group> 
        <div class="button-group">
            <flexbox>
                <flexbox-item>
                    <x-button type="primary" @click.native="logining">登录</x-button>
                </flexbox-item>
                <flexbox-item>
                    <x-button type="warn">注册</x-button>
                </flexbox-item>
            </flexbox>
        </div>

    </div>
</template>

<script>
    import { Group, Cell, XInput, XButton, Flexbox, FlexboxItem, Divider ,Toast} from 'vux'
    import axios from 'axios'
    export default{
        components:{
            Toast,
            Group,
            Cell,
            XInput,
            XButton,
            Flexbox, 
            FlexboxItem,
            Divider
        },
        data:function () {
            return {
                username:"",
                password:""
            }
        },
        methods:{
            logining(){
                if(!this.username){
                    api.toast({
                        msg: '请填写用户名！',
                        location: 'bottom'
                    })
                    return;
                } 
                if(!this.password){
                    api.toast({
                        msg: '请输入密码！',
                        location: 'bottom'
                    })
                    return;
                } 
                api.ajax({
                    url: 'http://192.168.1.47:8310/index.php?m=login&c=login&ac=login&op=ajax',
                    method: 'post',
                    dataType: 'json',
                    data: {
                        username: this.username,
                        password: this.password
                    }
                },function(ret,err){
                    if(ret){
                        api.openFrame({
                            name: 'main',
                            url: 'html/home/home.html',
                            bounces: true,
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h: mainPos.h
                            }
                        });
                    }else{
                        api.toast({
                            msg: err,
                            location: 'bottom'
                        })
                    }
                })
            }
        }
    }
</script>

<<style>
    .main{
        padding:0 20px;
    }
    .button-group{
        margin-top:20px;
    }
</style>

